<template>
  <wd-tabbar
    fixed
    v-model="tabbarStore.curIdx"
    active-color="#333"
    inactive-color="#bbbbbb"
    safeAreaInsetBottom
    placeholder
    @change="selectTabBar"
  >
    <!-- 自定义图标 -->
    <wd-tabbar-item
      class="font-size-20rpx"
      v-for="(item, idx) in tabbarList"
      :key="item.path"
      :title="item.text"
    >
      <template #icon>
        <image
          :src="staticUrl(idx === tabbarStore.curIdx ? item.selectedIconPath : item.iconPath)"
          :style="{ width: item.iconWidth, height: item.iconHeight }"
          class="h-42rpx w-42rpx"
        />
      </template>
    </wd-tabbar-item>
  </wd-tabbar>
</template>

<script setup lang="ts">
// unocss icon 默认不生效，需要在这里写一遍才能生效！注释掉也是生效的，但是必须要有！
// i-carbon-code
import { tabBar } from '@/pages.json'
import { tabbarStore } from './tabbar'

/** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = tabBar.list.map((item) => ({ ...item, path: `/${item.pagePath}` }))

function selectTabBar({ value: index }: { value: number }) {
  const url = tabbarList[index].path
  tabbarStore.setCurIdx(index)
  uni.switchTab({ url })
}
onLoad(() => {
  // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
  // #ifdef APP-PLUS | H5
  uni.hideTabBar({
    fail(err) {
      console.log('hideTabBar fail: ', err)
    },
    success(res) {
      console.log('hideTabBar success: ', res)
    },
  })
  // #endif
})
</script>
